<div id="app" class="container"  style="padding-top: 20px;">
    <div class="row">
        <div class="col-md-12 mt-3">
            <admin-page-welcome > 
                <bi-button size="big" type="primary" icon="fa-plus" v-power:admin.app.create  @click="addApp">创建应用</bi-button>
            </admin-page-welcome>
        </div>

        <div class="col-md-12 mt-3" >
            <h5 class="mt-2">设计应用</h5>
            <div  class="alert alert-secondary" v-if="!list.length" >
                暂时没有可以设计的应用
            </div>
            <div class="app-list">
                <template v-for="app in list" :key="app.name" >
                    <div class="app-item shadow-sm" @click="$go({action:'edit',gets:{name:app.name}})"  >
                        <bi-picture :src="app.icon" :width="100" :height="100" ></bi-picture>
                        <div class="app-title">{{app.title}}</div>
                    </div>
                </template>
            </div>
    
            <h5 class="mt-3">文档</h5>    
          </div>
    </div>
</div>

<script>
import addDialog from './add-dialog.vue';

let app = admin.createApp({
    data(){
        return {
            list:[],
            loading:false
        }
    },
    methods:{
        flash(){
            this.$ajax({
                url:this.$url({action:'list'}),
                success:(res)=>{
                    this.list = res;
                }
            })
        },
        addApp(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(addDialog),
                callback:()=>{
                    this.flash();
                }
            })
        },
        appImage(name,image){
            
            if (image){
                return '/app/'+name+'/'+image;
            }else{
                return '/app/designer/assets/image/app.png';
            }
        }
    },
    mounted(){
        this.flash();
    }
}).mount('#app');
</script>

<style>
    .app-list{
        display: grid;
        padding: 10px 0;
        grid-template-columns: repeat(auto-fill,120px);
        grid-gap: 15px;
    }
    
    .app-list .app-item{
        text-align: center;
        cursor: pointer;
        width: 120px;
        background-color: #FFF;
        border-radius: 5px;
        padding: 10px;
    }
    
    
    .app-list .app-item:hover{
        background-color: var(--bs-secondary-bg);
    }
    </style>